<template>
  <div class="editPaper">
    <van-nav-bar title="发表作品" left-text="返回" left-arrow @click-left="$router.back()" fixed >
      <van-button type="info" slot="right" size="small" @click="submitPaper">提交</van-button>
    </van-nav-bar>
    <br><br><br>
    <van-cell-group>
      <van-cell title="媒体类型" is-link :value=mediaType.content @click="mediaType.show=true"/>

      <van-cell title="主题类型" is-link :value=topicType.content @click="topicType.show=true"/>

          <van-field
                  label="标题"
                  v-model="title"
                  type="text"
                  placeholder="请输入标题"
                  rows="1"
          />

<!--      <van-cell title="正文" :border="false" />-->
      <article >
        <section v-for="(item,index) in editPaper.contentList" @click="activeContent=index">

          <div style="display: flex;align-items:center;" >
            <van-field v-if="item.type=='text'" v-model="item.content" :border="false" type="textarea"
            :placeholder="index==0?'正文：':'请输入文字'"
                       rows="1"
                       autosize  :readonly="index==0" />
            <div class="inside_img" v-if="item.type=='img'" style="padding: 15px" >
              <img :src="item.content">
            </div>
            <van-icon name="cross" style="padding: 10px;" color="#2c82d9" @click="deleteContent(index)"
                      v-if="index!=0"/>
          </div>
          <div @click.stop>
          <van-icon name="description" size=100 v-if="activeContent==index"
                    style="font-size:20px;text-align: center;display:block"
                    color="#2c82d9" @click="insertText(index)" >
          </van-icon>
          </div>
        </section>
      </article>

      <br><br><br><br><br>

    </van-cell-group>




    <van-popup v-model="mediaType.show" position="bottom" :overlay="true">
      <van-tree-select
              :items="mediaType.items"
              :main-active-index="mediaType.mainActiveIndex"
              :active-id="mediaType.activeId"
              @navclick="onMediaTypeNavClick"
              @itemclick="onMediaTypeItemClick"
      />
    </van-popup>
    <van-popup v-model="topicType.show" position="bottom" :overlay="true">
      <van-tree-select
              :items="topicType.items"
              :main-active-index="topicType.mainActiveIndex"
              :active-id="topicType.activeId"
              @navclick="onTopicTypeNavClick"
              @itemclick="onTopicTypeItemClick"
      />
    </van-popup>



    <div style="position: fixed;bottom: 0;width: 100%" >
      <van-collapse v-model="activeNames"  >
        <van-collapse-item title="图像" name="1"  >
          <div slot="value"
               style="display: flex;align-items:center" > <span @click="$router.push('/resMgr')"> 素材: &nbsp;</span> <van-icon name="photograph"
                                                                                             @click="$router.push('/resMgr')"
          /></div>

          <van-row  flex>
            <van-col span="8" v-for="(item,index) in imgs" class="img_item">
              <div class="img_box"
                   :style="{backgroundSize:'cover',backgroundImage:'url(http://pqusfpdyj.bkt.clouddn.com/'+item.path+')'}"
                   @click="showHD(imgs,index)">

              </div>
              <div class="operation">
                <van-icon name="close" size=100 @click="selectImg(item.id)"/>
                <van-icon name="certificate" size=100 @click="insertImg(item)" />
              </div>
            </van-col>
          </van-row>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>
<script>
    // @ is an alias to /src
import ltxService from '../services/LtxService'
    import {ImagePreview, Toast} from "vant";
import storeUtil from '../utils/storeUtil'
    export default {

  computed:{
    ...storeUtil.makeFields("editPaper")
  },
      mounted(){
        this.reflushImg()
        // ImagePreview({maxZoom:4,images:["https://static3w.kuaikanmanhua.com/assets/img/comic/11_1_30bf5d6.png"]});
      },
        data()
        {
            return{
              activeContent:0,
              imgs:[],
              activeNames:[],
                active:0,
              title:"",
              mediaType:{
                items:[
                  {
                    text: '文字',
                    children: [
                      {text: '诗词歌赋', id: 1,},
                      {text: '散文', id: 2},
                      {text: '小说', id: 3},
                      {text: '论述', id: 4}
                    ]},{
                  text: '美术',
                  children: [
                    {text: '平面设计', id: 1,},
                    {text: '摄影', id: 2},
                    {text: '漫画', id: 3},
                    {text: '绘画', id: 4}
                  ]}
                  ],
                content:"",
                show:false,
                mainActiveIndex: 0,
                activeId: 1
              },
              topicType:{
                items:[{
                  text: '所有主题',
                  children: [
                    {text: '自然', id: 1,},
                    {text: '校园', id: 2},
                    {text: '情感', id: 3},
                    {text: '思想', id: 4}
                  ],
                }],
                content:"",
                show:false,
                mainActiveIndex: 0,
                activeId: 1,
              }
            }
        },
      methods: {
        deleteContent(index){
          if(index!=0){
            this.editPaper.contentList.splice(index,1);
            this.activeContent--
          }
        },
        submitPaper()
        {
          ltxService.addPaper(
                  {
                    title:this.title,
                    contentList:this.editPaper.contentList,
                    dir:this.topicType.content,
                    contentType:this.mediaType.content,
                  }).then((resp)=>{
              alert("发布成功")
          })
        },
        insertText(index){
          if(this.activeContent<this.editPaper.contentList.length)
          {
            this.editPaper.contentList.splice(this.activeContent+1,0,{type:"text",content:''})
          }
          else {
            Toast("请选中插入位置")
          }
        },
        insertImg(item){
          if(this.activeContent<this.editPaper.contentList.length)
          {
            this.editPaper.contentList.splice(this.activeContent+1,0,{type:"img",content:'http://pqusfpdyj.bkt.clouddn.com/'+item.path})
          }
          else {
            Toast("请选中插入位置")
          }
        },
        selectImg(id)
        {
          let index=this.$store.state.imgIds.indexOf(id);
          if(index>=0 )
          {
            this.$store.state.imgIds.splice(index,1)
          }
          else this.$store.state.imgIds.push(id)
          this.reflushImg()
        },
        reflushImg()
        {
          ltxService.getUserResArr(this.$store.state.imgIds).then((resp)=>{
            this.imgs=resp.data.data
          })
        },
        showHD(imgs,index){
          let imgUrls=[]
          for(let i=0;i<imgs.length;i++)imgUrls.push(['http://pqusfpdyj.bkt.clouddn.com/'+imgs[i].path])
          ImagePreview({images:imgUrls,startPosition:index})
        },
        onRead(file, detail) {

        },
        onMediaTypeNavClick(index) {
          this.mediaType.mainActiveIndex = index;
        },
        onMediaTypeItemClick(data) {
          this.mediaType.activeId = data.id;
          this.mediaType.content = data.text;
        },
        onTopicTypeNavClick(index) {
          this.topicType.mainActiveIndex = index;

        },
        onTopicTypeItemClick(data) {
          this.topicType.activeId = data.id;
          this.topicType.content = data.text;
        }
      },
        name: 'editPaper',
        components: {
        }
    }
</script>
<style lang="scss" scoped>
.editPaper{
  .operation{
    font-size: 16px;
    text-align: center;
  }
  .van-row{

  }
  .img_item{
    background-color: white;
    height: 150px;
    .operation{
      padding-top: 4px;
      display: flex;
      justify-content: space-around;
    }

    .img_box{
      height: 120px;
    }
  }
}

</style>

